<template>
	<view class="box">
		<view class="box-header">
			<view class="head-box">
				<shopro-navbar back-icon-color="#fff" :background="{}">
					<view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
						<view style="color:#ffffff">会员充值</view>
					</view>
				</shopro-navbar>
			</view>
			<view class="head-userInfo">
				<view class="head-userInfo-photo">
					<image :src="userInfo.photo" mode=""></image>
				</view>
				<view class="head-userInfo-user">
					<view class="head-userInfo-name">
						{{userInfo.userName}}
					</view>
					<view class="head-userInfo-msg">
						开通商帮会员，尽享更多权益
					</view>
				</view>
			</view>
		</view>
		<view class="card-list">
			<view class="card-list-item" v-for="(item,index) in cardLisrArr" :key="index"
				:class="activeIndex == index ?'active':''" @click="cardClick(item,index)">
				<image src="https://ynkg-yff.oss-cn-hangzhou.aliyuncs.com/temp/Frame_1665820791040.png" mode=""></image>
				<view class="card-list-item-name">
					{{item.name}}
				</view>
				<view class="card-list-item-price">
					¥{{item.price}}
				</view>
				<view class="card-list-item-time">
					有效期{{item.use_day}}天
				</view>
			</view>
		</view>
		<view class="card-tg">
			<view class="card-tg-item" v-for="(item,index) in tgLIst" :key="index" @click="tgClick(item,index)"
				:class="tgIndex==index?'tgActive':''">
				{{item.name}}
			</view>
		</view>
    <view class="card-tg">
      <view class="card-tg-item" style="width: 49%;" v-for="(item,index) in tgLIstpage" :key="index" @click="tgClickpage(item,index)">
        {{item.name}}
      </view>
    </view>
    <!-- 拼团 砍价规则 -->
    <view class="pinkList">
      <view class="pinkList-title">
        <view class="pinkList-list-title">
          <view class="pinkList-list-title-item" :class="activeTitle=='1'?'active-title':''" @click="activeTitle=1"> 拼团规则</view>
          <view class="pinkList-list-title-item" :class="activeTitle=='2'?'active-title':''" @click="activeTitle=2"> 砍价规则</view>
        </view>
        <view class="pinkList-title-left" v-if="activeTitle=='1'">
          <view class="guize">
            <view class="footer-oneTitle">
              <view class="guize-item" v-for="(item_huiyuan, index_huiyuan) in cardLisrArr">
                <view class="footer-oneTitle-title">
                  {{ item_huiyuan.name }}-金额{{ item_huiyuan.price  }}
                </view>
                <view class="footer-oneTitle-msg">
                  <view class="footer-oneTitle-msg-row">
                    <view class="footer-oneTitle-msg-col title-cols">拼团人数</view>
                    <view class="footer-oneTitle-msg-col title-cols">拼团金额</view>
                    <view class="footer-oneTitle-msg-col title-cols">返回金额</view>
                  </view>
                  <view class="footer-oneTitle-msg-row">
                    <view class="footer-oneTitle-msg-col">2人成团</view>
                    <view class="footer-oneTitle-msg-col">
                      {{$bigDecimal.subtract(item_huiyuan.price, item_huiyuan.two_price, 3)|| 0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.two_price || 0 }}</view>
                  </view>
                  <view class="footer-oneTitle-msg-row">
                    <view class="footer-oneTitle-msg-col">3人成团</view>
                    <view class="footer-oneTitle-msg-col">{{$bigDecimal.subtract(item_huiyuan.price,item_huiyuan.three_price,3)||0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.three_price }}</view>
                  </view>
                  <view class="footer-oneTitle-msg-row">
                    <view class="footer-oneTitle-msg-col">4人成团</view>
                    <view class="footer-oneTitle-msg-col">{{$bigDecimal.subtract(item_huiyuan.price,item_huiyuan.four_price,3)||0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.four_price }}</view>
                  </view>
                  <view class="footer-oneTitle-msg-row" v-if="item_huiyuan.five_price &&(item_huiyuan.id ==2 || item_huiyuan.id ==3)">
                    <view class="footer-oneTitle-msg-col">5人成团</view>
                    <view class="footer-oneTitle-msg-col">{{$bigDecimal.subtract(item_huiyuan.price,item_huiyuan.five_price,3)||0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.five_price }}</view>
                  </view>
                  <view class="footer-oneTitle-msg-row" v-if="item_huiyuan.six_price && item_huiyuan.id ==3">
                    <view class="footer-oneTitle-msg-col">6人成团</view>
                    <view class="footer-oneTitle-msg-col">{{$bigDecimal.subtract(item_huiyuan.price,item_huiyuan.six_price,3)||0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.six_price }}</view>
                  </view>
                  <view class="footer-oneTitle-msg-row"  v-if="item_huiyuan.seven_price && item_huiyuan.id ==3">
                    <view class="footer-oneTitle-msg-col">7人成团</view>
                    <view class="footer-oneTitle-msg-col">{{$bigDecimal.subtract(item_huiyuan.price,item_huiyuan.seven_price,3)||0}}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.seven_price }}</view>
                  </view>
                </view>
              </view>
              <view class="guize-shuoming">
                <view class="footer-Title-title">
                  拼团说明：
                </view>
                <view class="footer-Title-msg">
                  ① 时间：发起拼团，6小时内有效；
                </view>
                <view class="footer-Title-msg">
                  ② 返现：先支付原价金额，待拼团成功后，根据实际参与的人数，于12小时内，将差价返回支付的账户；拼团时间到，若未达到上限人数，则按现有支付人数为基础进行返现；
                </view>
                <view class="footer-Title-msg">
                  ③ 说明：已成为本平台会员的用户也可参与本活动，参与成功后，会员时间自动叠加更新。
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="pinkList-title-left" v-if="activeTitle=='2'">
          <view class="guize">
            <view class="footer-oneTitle">
              <view class="guize-shuoming">
                <view class="footer-Title-msg">
                  如何成为免费会员：发出助力链接，邀请他人助力，可免费成为会员。
                </view>
              </view>
              <view class="guize-item">
                <view class="footer-oneTitle-msg">
                  <view class="footer-oneTitle-msg-row footer-oneTitle-title">
                    <view class="footer-oneTitle-msg-col">会员卡类型</view>
                    <view class="footer-oneTitle-msg-col">需邀请助力人数</view>
                  </view>
                  <view class="footer-oneTitle-msg-row" v-for="(item_huiyuan, index_huiyuan) in cardLisrArr">
                    <view class="footer-oneTitle-msg-col title-cols">
                      {{ item_huiyuan.name }}</view>
                    <view class="footer-oneTitle-msg-col">{{ item_huiyuan.people || 0 }}</view>
                  </view>
                </view>
              </view>
              <view class="guize-shuoming">
                <view class="footer-Title-msg">
                  ① 受邀人如何助力：参与助力的人只需进入程序平台，点击“为他助力”即可，无需支付任何费用。
                </view>
                <view class="footer-Title-msg">
                  ② 有效时间：发出助力链接后24小时内有效，如有效时间内未完成助力，可继续发出链接，邀约助力，每次发出邀约的链接有效时间为24小时。
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-modal v-model="fxShow" :show-cancel-button="true" :content="content">
			<view slot="confirm-button">
				<button open-type="share"
					style="height: 110rpx;display: flex;justify-content: center;align-items: center;background: none;font-size: 32rpx;">发给微信好友</button>
			</view>
		</u-modal>
		<!-- <u-popup v-model="helpShow" mode='center' closeable="true" height="464rpx" width="90%" class="helpShowClass"
			border-radius="16" z-index="9">
			<image :src="avatar" mode=""></image>
			<view class="">
				<view class="helpShowClass-tite">
					<view class="" v-if="typeShareOpen == 2">
						{{nickname}}（发链接人）
					</view>
				</view>
				<view class="helpShowClass-content">
					<view class="" v-if="typeShareOpen == 2">
						快去帮好友砍一刀吧<br /> 填写会员资料后砍价成功
					</view>
				</view>
			</view>
			<view class="helpShowClass-btn1" @click="helpClick" v-if="typeShareOpen == 2">
				去砍价
			</view>
			<view class="helpShowClass-btn" @click="gotoPink()" v-else>
				去团购
			</view>
		</u-popup> -->
		<view class="popup-show-box" v-if="helpShow && screnVipShareObj.shareVipType == 2">
			<view class="helpShowClass">
				<image :src="avatar" mode=""></image>
				<view class="help-show-close" @tap="closeHelpChange()"><u-icon name="close" size="28" ></u-icon></view>
				<view class="">
					<view class="helpShowClass-tite">
						<view class="">
							{{nickname}}（发链接人）
						</view>
					</view>
					<view class="helpShowClass-content">
						<view class="">
							快去帮好友砍一刀吧<br /> 填写会员资料后砍价成功
						</view>
					</view>
				</view>
				<view class="helpShowClass-btn1" @click="helpClick">
					去砍价
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				helpShow: false,
				fxcontent: '',
				fxShow: false,
				userInfo: {
					photo: '',
					userName: '',
				},
				activeIndex: 0,
				tgLIst: [{
					id: 1,
					name: '自己开通'
				}, {
					id: 2,
					name: '发起团购'
				}, {
					id: 3,
					name: '免费成为会员'
				}],
        tgLIstpage:[{
          id: 1,
          name: '拼团列表'
        }, {
          id: 2,
          name: '砍价列表'
        }],
				tgIndex: 0,
        activeTitle:1,
				cardLisrArr: [],
				vip_id: '',
				typeId: '',
				pinkInfoList: {
					data: {
						list: []
					}
				},
				helpInfoList: {
					data: {
						list: []
					}
				},
				isOpen: false,
				max: 3,
				helpMax: 3,
				helpIsOpen: false,
				twoPrice: 0,
				threePrice: 0,
				fourPrice: 0,
				fivePrice: 0,
				sixPrice: 0,
        sharepeople:20,
				shareOrder: {},
				price: 0,
				content: '',
				nickname: '',
				avatar: '',
				screnVipShareObj: null,
				shareLinkId: 0,
				typeShareOpen: 1,
				fxPinkId: 0,
				fxPrice: 0,
			}
		},
		onShow(option) {
			this.userInfoObject()
			this.getVipList()
			this.getPinkInfoList()
      console.log("=========this.activeIndex111",this.activeIndex,this.price)
		},
		onLoad(option) {
			//this.shareOpenUserDetail()
			let screnVipShareObj = uni.getStorageSync('screnVipShareObj')
			if (screnVipShareObj) {
				if (screnVipShareObj.userId == uni.getStorageSync('userInfo').id) return uni.removeStorageSync('screnVipShareObj')
				this.screnVipShareObj = screnVipShareObj
				this.shareOpenUserDetail()
				uni.removeStorageSync('screnVipShareObj')
			}
			if(option.activeIndex){
        this.activeIndex = option.activeIndex
      }
			this.getPinkInfoList()
		},
		computed: {
			...mapGetters(['initStore']),
		},
		methods: {
			countDown(id, type) {
				const data = {
					id,
					type
				}
				this.$https('vip.updateOrder', data).then(res => {
					this.getVipList()
					this.getPinkInfoList()
				})
			},
			// 删除团购
			pinkDelete(item) {
				let self = this
				uni.showModal({
					title: ' ',
					content: '是否确认删除？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#4D7EFF',
					cancelColor: '#000',
					success: function(res) {
						if (res.confirm) {
							const data = {
								id: id
							}
							self.$https('vip.delPink', data).then(res => {
								self.$u.toast('删除成功');
								self.getPinkInfoList()
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			// 删除砍价
			helpDelete(item) {
				let self = this
				uni.showModal({
					title: ' ',
					content: '是否确认删除？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#4D7EFF',
					cancelColor: '#000',
					success: function(res) {
						if (res.confirm) {
							const data = {
								id: item.id

							}
							self.$https('vip.delHelp', data).then(res => {
								self.$u.toast('删除成功');
								self.getPinkInfoList()
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			//再次砍价
			helpAgain(item) {
				this.$https('vip.createHelpOrder', {
					id: this.vip_id
				}).then(res => {
					if (res.code == '1') {
						this.content = '快去邀请微信好友 帮您砍价吧~'
						this.fxShow = true
						this.shareOrder = res.data
					}
				})
			},
			//再次团购
			pinkAgain(item) {
				uni.navigateTo({
					url: `/pages/index/wxPlay?typeId=${2}&id=${this.vip_id}&price=${this.price}&pink_id=${this.screnVipShareObj.vip_help_id}`
				})
			},
			// 通过链接 获取团长信息昵称
			shareOpenUserDetail() {
				let {
					vip_help_id,
					shareVipType
				} = this.screnVipShareObj
        console.log("===========this.screnVipShareObj",this.screnVipShareObj)
				this.$https('vip.orderAvatar', {
					id: vip_help_id,
					type: shareVipType
				}).then(res => {
          console.log("res==========res",res)
					this.helpShow = true
					if (res.code) {
						this.avatar = res.data.user.avatar
						this.nickname = res.data.user.nickname
						this.fxPinkId = res.data.vip.id
						this.fxPrice = res.data.vip.price
					}

				})
			},
			// 砍价
			helpClick() {
				let {
					vip_help_id
				} = this.screnVipShareObj
				this.$https('vip.helpFriend', {
					id: vip_help_id
				}).then(res => {
					this.helpShow = false
					if (res.code == 1) {
						uni.showToast({
							title: res.msg
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			closeHelpChange() {
				this.helpShow = false
			},
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {
					this.userInfo.photo = res.avatar
					this.userInfo.userName = res.nickname
				})
			},
			// 点击卡
			cardClick(item, index) {
				this.activeIndex = index
				this.vip_id = item.id
				this.price = Number(item.price)
        this.sharepeople = item.people

			},
      //跳转对应的列表页面
      tgClickpage(item, index) {
        uni.navigateTo({
          url: `/pages/user/wallet/tgList?typeId=${item.id }`
        })
      },
			// 选择开通方式
			tgClick(item, index) {
				if (index !== 2) {
					this.tgIndex = index
					this.typeId = item.id
					// this.createPLay()
					uni.navigateTo({
						url: `/pages/index/wxPlay?typeId=${this.typeId }&id=${this.vip_id}&activeIndex=${this.activeIndex}&price=${this.price}`
					})
				} else {
					this.$https('vip.createHelpOrder', {
						id: this.vip_id
					}).then(res => {
						if (res.code == '1') {
							// this.content = '快去邀请微信好友, 帮您砍价吧'
							// // this.fxShow = true
              this.shareOrder = res.data
              let url = `/pages/user/wallet/tgListContent?id=${this.shareOrder.id}&typeTitle=2`
              uni.navigateTo({
                url: url
              })
						}
					})
				}
			},
			//获取vip列表
			getVipList() {
				this.$https('vip.vipList').then(res => {
					this.cardLisrArr = res.data
					this.vip_id = this.cardLisrArr[this.activeIndex].id
					this.price = this.cardLisrArr[this.activeIndex].price
          this.sharepeople = this.cardLisrArr[this.activeIndex].people
				})
			},
			// 创建支付订单
			createPLay() {
				const data = {
					type: this.typeId,
					id: this.vip_id,
					pink_id: this.pink_id,
				}
				this.$https('vip.createVipOrder', data).then(res => {
					let typeId = this.typeId
					let self = this
					wx.requestPayment({
						timeStamp: res.data.pay_data.timeStamp,
						nonceStr: res.data.pay_data.nonceStr,
						package: res.data.pay_data.package,
						signType: res.data.pay_data.signType,
						paySign: res.data.pay_data.paySign,
						success(res) {
							if (typeId == 2) {
								self.fxShow = true
							}
						},
						fail(err) {
							console.log(err, '支付失败')
						}
					})
				})
			},
			// 查看团购人员参与列表及助力人员列表
			getPinkInfoList() {
				this.$https('vip.pinkInfo').then(resPinkInfo => {
					this.pinkInfoList = resPinkInfo
				})
				this.$https('vip.helpInfo').then(resHelpInfo => {
					this.helpInfoList = resHelpInfo
				})
			},
			gotoPink(){
				let { vip_help_id } = this.screnVipShareObj
				uni.navigateTo({
					url:`pages/index/wxPlay?typeId=${2}&pink_id=${vip_help_id}&id=${this.fxPinkId}&price=${this.fxPrice}`
				})
				this.helpShow = false
			},
			gotoPink() {
				let {
					vip_help_id
				} = this.screnVipShareObj
				uni.navigateTo({
					url: `pages/index/wxPlay?typeId=${2}&pink_id=${vip_help_id}&id=${this.fxPinkId}&price=${this.fxPrice}`
				})
			},
		},

		onShareAppMessage() {
			let screnObj = {}
			if (this.shareOrder.id) screnObj = {
				vip_help_id: this.shareOrder.id,
				shareVipType: 2,
				userId: uni.getStorageSync('userInfo').id
			}
			let path =
				`pages/index/membeRecharge?${screnObj.vip_help_id ? 'screnVipShareObj=' + JSON.stringify(screnObj) : ''}&userBindId=${screnObj.userId}`
			return {
				path,
				imageUrl: 'https://d-duomi.bigchun.com/imgs/vip/shareBg.jpg',
				title: '快来帮我助力吧~'
			}
		},

	}
</script>

<style lang="less" scoped>
	.helpShowClass {
		text-align: center;
		width: 638rpx;
		min-height: 300rpx;
		padding: 0 0 78rpx;
		background: white;
		border-radius: 16rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 30%;

		.help-show-close {
			position: absolute;
			right: 26rpx;
			top: 26rpx;
		}

		image {
			width: 124rpx;
			height: 124rpx;
			display: block;
			border-radius: 50%;
			z-index: 99999;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&-tite {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 72rpx;
			margin-bottom: 40rpx;

		}

		&-content {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 50rpx;
		}

		&-btn1 {
			margin: 0 44rpx;
			text-align: center;
			line-height: 88rpx;
			border-radius: 16rpx;
			background: linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
		&-btn{
			width: 87%;
			margin: 30rpx 44rpx 0;
			text-align: center;
			line-height: 88rpx;
			border-radius: 16rpx;
			background: linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.box {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.box-header {
		background: url(https://ynkg-yff.oss-cn-hangzhou.aliyuncs.com/temp/1_1665715781852.png) no-repeat;
		background-size: 100% 100%;
		height: 368rpx;
		display: flex;
	}

	.head-userInfo {
		width: 95%;
		height: 132rpx;
		display: flex;
		margin: 0 auto;
		border-radius: 8rpx 8rpx 0 0;
		background: rgba(255, 255, 255, 0.4);
		align-self: flex-end;
		padding: 24rpx;

		.head-userInfo-photo {
			width: 88rpx;
			height: 88rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

		.head-userInfo-user {
			display: flex;
			flex-direction: column;
			color: #623808;
			margin-left: 15rpx;

			.head-userInfo-name {
				font-size: 36rpx;
			}

			.head-userInfo-msg {
				font-size: 28rpx;
			}
		}
	}

	.card-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		&-item {
			width: 30%;
			height: 280rpx;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 42rpx 0 14rpx 0;
			}

			&-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #623808;
				margin-bottom: 12rpx;
			}

			&-price {
				font-size: 44rpx;
				font-weight: bold;
				color: #623808;
				margin-bottom: 12rpx;
			}

			&-time {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.active {
		background: #FCFAEE;
		border: #EAC58E 4rpx solid;
	}

	.card-tg {
		width: 95%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;

		&-item {
			width: 30%;
			height: 108rpx;
			border-radius: 16rpx;
			opacity: 1;
			border: 2rpx solid #EAEAEA;
			color: #666666;
			line-height: 108rpx;
			text-align: center;
		}
	}

	.tgActive {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #623808;
		border: 2rpx solid #EBC690
	}

  .pinkList {
    width: 95%;
    margin: 20rpx auto;
    border:0.001rpx solid transparent;
    .pinkList-title{
      margin-bottom: 50rpx;
      .pinkList-list-title{
        background: #FFD69B;
        width: 100%;
        display: flex;
        border-radius: 24rpx 24rpx 0 0;
        padding: 30rpx 20rpx 30rpx;
        font-size: 32rpx;
        font-weight: bold;
        align-items: center;
        .pinkList-list-title-item{
          width: 50%;
          height: 50rpx;
          display: flex;
          justify-content: center;
          border-right:4rpx solid #D3B178 ;
          &:last-child{
            border-right: none;
          }
        }
        .active-title{
          color:#D12D20;
        }
      }
      .pinkList-title-left {
        background:#FFF9EB;
        border: 2rpx solid #E1B978;
        border-top: 0rpx solid #E1B978;
        border-radius: 0px 0px 8px 8px;
        opacity: 1;
        display: flex;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        min-height: 180rpx;
        .nodata{
          display: flex;
          align-items: center;
          height: 100%;
          width: 100%;
          justify-content: center;
        }
        .name_content{
          display: flex;
          align-items: center;
          image {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
          }
          .pinkList-title-left-cardType{
            font-size: 28rpx;
            color: #333333;
          }
        }
        .pinkList-title-left-cardType{
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          color: #999999;
        }
      }

      .pinkList-list-pinkList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        margin-bottom: 28rpx;

        .pinkList-list-pinkList-left {
          display: flex;
          justify-content: center;
          align-items: center;

          image {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
      }
      //规则样式
      .guize{
        width: 100%;
        .footer-oneTitle{
          width: 100%;
          .guize-item{
            width: 100%;
            margin-bottom: 30rpx;
            .footer-oneTitle-msg{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-direction: column;
              border-left: 2rpx solid #FCE8C9;
              .footer-oneTitle-msg-row{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .footer-oneTitle-msg-col{
                  flex: 1;
                  border-bottom: 2rpx solid #FCE8C9;
                  border-right: 2rpx solid #FCE8C9;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #FFF4DC;
                  padding: 20rpx 0;
                }
                .title-cols{
                  color: #884D14;
                }
              }
            }
            .footer-oneTitle-title{
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #FFD69B;
              padding: 20rpx 0;
              .footer-oneTitle-msg-col{
                background: #FFD69B!important;
                padding: 0!important;
                border-bottom: none!important;
              }
            }
          }
          .guize-shuoming{
            padding-bottom: 20rpx;
            .footer-Title-title{
              font-size: 28rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #884D14;
            }
            .footer-Title-msg{
              font-size: 28rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #884D14;
            }
          }
        }
      }
    }
  }

	.zhankai {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
		margin: 16rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .u-countdown-time {
		padding: 6rpx;
	}

	.popup-show-box {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9;
	}
</style>
